<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>分数加法：递归切割动画</title>
  <style>
    body {
      font-family: 'Microsoft YaHei', Arial, sans-serif;
      text-align: center;
      background: #f4f6f9;
      padding: 20px;
      color: #333;
    }
    h1 {
      color: #2c3e50;
    }
    .container {
      width: 512px;
      height: 512px;
      margin: 40px auto;
      border: 3px solid #333;
      position: relative;
      background-color: #f0f0f0;
      box-shadow: 0 0 20px rgba(0,0,0,0.2);
    }
    .piece {
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: bold;
      font-size: 14px;
      text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
      transition: background-color 1s ease;
    }
    #info {
      font-size: 26px;
      font-weight: bold;
      color: #2c3e50;
      margin: 20px;
    }
    .legend {
      width: 512px;
      margin: 20px auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 12px;
    }
    .legend-item {
      display: flex;
      align-items: center;
      font-size: 16px;
    }
    .legend-color {
      width: 18px;
      height: 18px;
      display: inline-block;
      margin-right: 6px;
      border: 1px solid #aaa;
    }
    button {
      padding: 14px 28px;
      font-size: 18px;
      background-color: #28a745;
      color: white;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      margin: 10px;
      transition: background-color 0.3s;
    }
    button:hover {
      background-color: #218838;
    }
    button:disabled {
      background-color: #6c757d;
      cursor: not-allowed;
    }
    .highlight {
      animation: pulse 1s infinite alternate;
    }
    @keyframes pulse {
      from { transform: scale(1); }
      to { transform: scale(1.05); }
    }
  </style>
</head>
<body>

  <h1>分数加法巧算：数形结合演示</h1>
  <p><strong>1/2 + 1/4 + 1/8 + 1/16 + 1/32 + 1/64 + 1/128 + 1/256 = 1 - 1/256</strong></p>
  <p>👉 <strong>规则</strong>：从一个大正方形开始，<span style="color:blue">横向</span>与<span style="color:red">竖向</span>交替平分剩余区域，每次取左半或下半</p>

  <div id="info">当前和 = 0</div>

  <div class="container" id="square"></div>

  <div class="legend" id="legend"></div>

  <button onclick="startAnimation()" id="startBtn">▶ 播放动画</button>
  <button onclick="resetAnimation()" id="resetBtn">↻ 重置</button>

  <script>
    const square = document.getElementById('square');
    const info = document.getElementById('info');
    const legend = document.getElementById('legend');
    const startBtn = document.getElementById('startBtn');

    // 分数与颜色
    const fractions = ['1/2', '1/4', '1/8', '1/16', '1/32', '1/64', '1/128', '1/256'];
    const colors = [
      '#e74c3c', // 1/2 红
      '#3498db', // 1/4 蓝
      '#2ecc71', // 1/8 绿
      '#f39c12', // 1/16 橙
      '#9b59b6', // 1/32 紫
      '#1abc9c', // 1/64 青
      '#d35400', // 1/128 棕
      '#34495e'  // 1/256 深蓝灰
    ];

    let regions = [{ x: 0, y: 0, w: 512, h: 512 }]; // 初始整个正方形
    let sum = 0;
    let interval = null;

    // 创建块
    function createPiece(x, y, w, h, color, label) {
      const div = document.createElement('div');
      div.className = 'piece';
      div.style.left = x + 'px';
      div.style.top = y + 'px';
      div.style.width = w + 'px';
      div.style.height = h + 'px';
      div.style.backgroundColor = color;
      div.textContent = label;
      square.appendChild(div);
      return div;
    }

    function resetAnimation() {
      if (interval) clearInterval(interval);
      square.innerHTML = '';
      legend.innerHTML = '';
      regions = [{ x: 0, y: 0, w: 512, h: 512 }];
      sum = 0;
      info.textContent = '当前和 = 0';
      startBtn.disabled = false;
    }

    function startAnimation() {
      startBtn.disabled = true;
      resetAnimation();
      let step = 0;

      interval = setInterval(() => {
        if (step >= 8) {
          clearInterval(interval);
          setTimeout(() => {
            info.innerHTML = `✅ 最终结果：<strong>1 - 1/256 = 255/256 ≈ 0.99609375</strong>`;
          }, 800);
          return;
        }

        const current = regions[step];
        const isHorizontal = (step % 2 === 0); // 横向: 步骤 0,2,4,6
        const value = 1 / Math.pow(2, step + 1);
        sum += value;

        let pieceX, pieceY, pieceW, pieceH;
        let nextRegion;

        if (isHorizontal) {
          // 横向切：上下分，取下半
          pieceW = current.w;
          pieceH = current.h / 2;
          pieceX = current.x;
          pieceY = current.y + pieceH;

          // 剩余：上半
          nextRegion = { x: current.x, y: current.y, w: current.w, h: pieceH };
        } else {
          // 竖向切：左右分，取左半
          pieceH = current.h;
          pieceW = current.w / 2;
          pieceX = current.x;
          pieceY = current.y;

          // 剩余：右半
          nextRegion = { x: current.x + pieceW, y: current.y, w: pieceW, h: current.h };
        }

        // 添加当前块
        createPiece(pieceX, pieceY, pieceW, pieceH, colors[step], fractions[step]);

        // 添加图例
        const leg = document.createElement('div');
        leg.className = 'legend-item';
        leg.innerHTML = `<span class="legend-color" style="background-color:${colors[step]}"></span>${fractions[step]}`;
        legend.appendChild(leg);

        // 更新和
        const num = Math.round(sum * 256);
        info.textContent = `当前和 = ${sum.toFixed(7)} = ${num}/256`;

        // 记录下一步区域
        regions.push(nextRegion);

        step++;
      }, 1600); // 每步1.6秒，便于观察
    }
  </script>

</body>
</html>